<template>
  <div class="abs wh100 login">
    <div class="headers">
      <div class="flexBox">
        <img src="../../assets/image/logo.png" class="header-logo">
        <span class="header-title">CEMS</span>
        <div class="inb-start header-line"></div>
        <span class="font-l2">智慧能源管理平台</span>
        <!--<div class="inb-start m-menu2" v-if="type !== 'login'">
          <Menu mode="horizontal" theme="light" :active-name="activeName" @on-select="onSelectMenu">
            <MenuItem name="energyOverview">
              <Icon class="m-iconfont" type="energy_overview"/>
              能耗总览
            </MenuItem>
            <MenuItem name="collectChart">
              <Icon class="m-iconfont" type="summary_carbon"/>
              汇总碳排
            </MenuItem>
          </Menu>
        </div>-->
      </div>
    </div>
    <div class="flexBox">
      <img class="login-icon" src="../../assets/image/icon-login.png">
      <div class="login-form">
        <div class="form-header">
          <span class="font-title font-l2 col-fff">系统登录</span>
        </div>
        <div>
          <Form label-position="left" ref="formCustom" :model="loginForm" :label-width="61"
                class="m-login-form txt-center">
            <FormItem label="用户名：" prop="userName">
              <Input type="text" v-model="loginForm.userName" @on-enter="login">
                <Icon type="user" slot="prefix" class="m-iconfont"/>
              </Input>
            </FormItem>
            <FormItem label="密码：" prop="userPwd">
              <Input type="password" v-model="loginForm.userPwd" @on-enter="login">
                <Icon type="password" slot="prefix" class="m-iconfont"/>
              </Input>
            </FormItem>
            <!--<img id="id_verification" src="/apis/kaptcha.jpg" style="display: none;">-->
            <Button :loading="loginForm.loading" type="primary" long @click="login">登 录</Button>
          </Form>
        </div>
      </div>
    </div>
    <div class="login-foot abs-bottom txt-center font-m2 col-fff">
      <div class="mar-top-m" style="margin-top: 35px">
        <span>帮助</span>
        <div class="inb-txt-top foot-line"></div>
        <span>隐私</span>
        <div class="inb-txt-top foot-line"></div>
        <span>条款</span>
      </div>
      <div class="mar-top-ss">
        <!--<span>copyright © 2019 广州工机物联有限公司版权所有</span>-->
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    directives: {},
    components: {},
    mixins: [],
    data () {
      return {
        loginForm: {
          userName: '',
          userPwd: '',
          loading: false
        },
        // loginRules: {
        //     userName: [
        //         { required: true, message: '用户名不能为空', trigger: 'blur' }
        //     ],
        //     userPwd: [
        //         { required: true, message: '密码不能为空', trigger: 'blur' }
        //     ]
        // }
      }
    },
    props: {},
    computed: {},
    watch: {},
    methods: {
      login () {
        let self = this
        if (self.loginForm.userName && self.loginForm.userPwd) {
          self.$set(self.loginForm, 'loading', true)
          let postData = {
            username: this.loginForm.userName,
            password: this.loginForm.userPwd,
            verification: 0
          }
          window.myapi.login(postData).then(res => {
            if (res.data.status === 200) {
              self.$Message.success('登录成功!')
              if (self.loginForm.userName === 'we') {
                self.$router.push('/electricity')
              }
              if (res.data.info) {
                this.$store.commit('user/addLoginer', res.data.info)
              }
          /*    self.$router.push({
                name: 'console'
              })*/
              self.goPage()
              self.$set(self.loginForm, 'loading', false)
            } else {
              let msg = res.data.msg ? res.data.msg : '登录失败！'
              self.$Message.error({
                content: msg,
                duration: 2
              })
              self.get_kaptcha()
              self.handleReset('formCustom')
            }
          })
        }
      },
      // 跳转页面
      goPage: function () {
        let self = this
        // self.$router.push({ path: '/main/dashboard' })
        // 跳入演示页面
        if (self.loginForm.userName === 'we') {
          self.$router.push('/electricity')
          return
        }
        self.$router.push({path: '/display'})
        /*    self.$router.push({
			 name: 'console'
		   })*/
      },
      // 获取验证码
      get_kaptcha: function () {
        let self = this
        self.hasValidatorImg = false
        window.myapi.kaptcha().then(function (res) {
          if (res.status === 200) {
            document.getElementById('id_verification').src = window.URL.createObjectURL(res.data)
            self.hasValidatorImg = true
          } else {
            self.hasValidatorImg = false
          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!')
          } else {
            this.$Message.error('Fail!')
          }
        })
      },
      // enter键
      enterListen: function () {
        let self = this
        document.onkeydown = function (event) {
          var e = event || window.event
          if (e && e.keyCode === 13) {
            // 回车键的键值为13
            // 调用登录按钮的登录事件
            self.login()
          }
        }
      },
      handleReset: function (name) {
        this.$refs[name].resetFields()
      },
    },
    beforeCreate () {
    },
    created () {
    },
    destroyed () {
    },
    mounted () {
    }
  }
</script>
<style scoped>
  .login {
    min-height: 800px;
    height: 100%;
    width: 100%;
    min-width: 1600px;
    min-height: 969px;
    background: #142156 url("../../assets/image/icon-login-bg.png") repeat top;
  }

  .login-icon {
    width: 888px;
    margin: 150px 125px 0 195px;
  }

  .login-form {
    height: 430px;
    width: 500px;
    background-color: #132554;
    margin-top: 215px;
  }

  .form-header {
    height: 58px;
    line-height: 58px;
    background-color: #101F47;
  }

  .font-title {
    margin-left: 35px;
  }

  .login-foot {
    width: 100%;
    height: 95px;
    background-color: #132453;
  }

  .foot-line {
    height: 18px;
    width: 1px;
    background-color: #ffffff;
    margin: 0 35px;
  }

  .m-login-form {
    width: 360px;
    margin-left: 70px;
    margin-top: 60px;
  }
  .headers{
    color: #7DA1FF;
    background-color: #111E49;
    height: 80px;
    line-height: 80px;
    justify-content: space-between;
  }

  .flexBox {
    display: flex;
  }

  .header-logo {
    height: 50px;
    margin-left: 60px;
    margin-top: 15px;
  }

  .header-title {
    font-size: 36px;
    margin-left: 26px;
  }

  .inb-start {
    display: inline-block;
    vertical-align: top;
  }

  .header-line {
    height: 27px;
    width: 1px;
    background-color: #7092fd;
    margin: 25px 22px 0 18px;
  }
/*dddd*/
  .font-l2 {
    font-size: 24px
  }
</style>
